<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <view style="display: flex">
      <!-- 左侧列表区域 -->
      <scroll-view scroll-y="true" class="leftscrool">
        <view :class="{ leftscroolitem: true, common: checktype == index }" v-for="(item, index) in typelist" :key="item.id" @click="getsmallcategory(item.id, index)">
          {{ curlang == 'zh-Hans' ? item.name.cn : curlang == 'en' ? item.name.en : curlang == 'ru' ? item.name.ru : '' }}
        </view>
      </scroll-view>
      <!-- 右侧列表区域 -->
      <scroll-view scroll-y="true" style="box-sizing: border-box; height: 1050rpx; padding: 30rpx 30rpx">
        <view>
          <view class="title">{{ curFirstname }}</view>
          <view class="goodsitem" v-for="(item, index) in smalltypelist" :key="item.id" @click="godetail(item.id)">
            <image src="/sub_goodstype/static/goodsimg.png" style="width: 138rpx; height: 138rpx" mode=""></image>
            <view class="name">{{ curlang == 'zh-Hans' ? item.name.cn : curlang == 'en' ? item.name.en : curlang == 'ru' ? item.name.ru : '' }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
import { category, smallcategory } from '@/services/shop.js';
export default {
  components: {
    headerCom,
    footerCom
  },
  onLoad() {
    // 获取左侧列表
    this.gettypelist();
    this.curlang = uni.getLocale();
  },
  data() {
    return {
      curlang: '',
      typelist: [], // 一级目录
      checktype: 0,
      curFirstname: '',
      smalltypelist: [] // 二级目录
    };
  },
  methods: {
    // 获取左侧列表
    async gettypelist() {
      const res = await category();
      // 将一级目录的name属性转为obj格式
      res.result.data.forEach((item) => {
        item.name = JSON.parse(item.name);
      });
      this.typelist = res.result.data;
    },
    // 获取右侧列表
    async getsmallcategory(id, index) {
      this.checktype = index;
      const res = await smallcategory({ id: id });
      // 选中当前一级所选中的名字
      this.curFirstname =
        this.curlang == 'zh-Hans' ? this.typelist[index].name.cn : this.curlang == 'en' ? this.typelist[index].name.en : this.curlang == 'ru' ? this.typelist[index].name.ru : '';
      // 将二级目录的name属性转为obj格式
      res.result.data.forEach((item) => {
        item.name = JSON.parse(item.name);
      });
      this.smalltypelist = res.result.data;
    },
    // 跳转到详情
    godetail(id) {
      uni.navigateTo({
        url: '/sub_goodstype/goodsdetail/goodsdetail?categoryid=' + id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .leftscrool {
    box-sizing: border-box;
    width: 220rpx;
    height: 1050rpx;
    .leftscroolitem {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      width: 200rpx;
      height: 100rpx;
    }
  }
  .common {
    border-left: 10rpx solid #61bdb2;
    background-color: #ffffff;
  }
  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
  }
  .goodsitem {
    display: inline-block;
    width: 138rpx;
    height: 180rpx;
    margin-top: 24rpx;
    margin-right: 20rpx;
    .name {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      text-align: center;
      color: #222222;
    }
  }
}
</style>